<template>
  <view>
    <aki-particles :particlestyle="particlestyle"></aki-particles>
    <view class="login">
      <view class="login_top u-flex u-ali-center u-ju-center">
        <image src="../../static/login/logo_white.png" mode=""></image>
      </view>
      <view class="login_title">
        TDC交易
      </view>
      <view class="login_btn" @click="$ui.push('/pages/login/login')">
        登录
      </view>
      <view class="regeiter_btn" @click="$ui.push('/pages/login/regiter')">
        注册
      </view>
      <view class="bottom_text">
        <span @click="$ui.push('/pages/login/Instructions')">《注册须知》</span>
        <span @click="$ui.push('/pages/login/about')">《关于我们》</span>
      </view>
    </view>
  </view>
  
</template>

<script>
  import akiparticles from '../../uni_modules/aki-particles/components/aki-particles/aki-particles.vue'//导入组件
  export default {
    components:{"aki-particles":akiparticles},

    data() {
      return {
        img: '../../../static/login/banner_black.png',
        particlestyle:{
            "style":"akira",
            "zindex":200,
            "bgcolor":"#202020"
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .login {
    width: 100%;
    height: 100vh;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    // background-image: url(@/static/login/banner_black.png);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 300;
    .login_top {
      position: absolute;
      top: 20%;
      left: 50%;
      transform: translateX(-50%);
      width: 296rpx;
      height: 296rpx;
      background-image: url('@/static/login/circle.png');
      background-size: 100% 100%;

      image {
        width: 162rpx;
        height: 195rpx;
        animation: move 4s linear infinite alternate;
      }
    }

    .login_title {
      position: absolute;
      bottom: 28%;
      width: 100%;
      font-size: 50rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      text-align: center;
    }

    .login_btn {
      left: 52rpx;
    }

    .regeiter_btn {
      right: 52rpx;
    }

    .login_btn,
    .regeiter_btn {
      position: absolute;
      bottom: 15%;
      width: 300rpx;
      height: 80rpx;
      background: linear-gradient(45deg, #CFB05D 13%, #C99838 100%);
      border-radius: 20rpx;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #FFFFFF;
      text-align: center;
      line-height: 80rpx;
    }

    .bottom_text {
      position: absolute;
      bottom: 5%;
      width: 100%;
      text-align: center;

      span {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #CFB15D;
      }
    }
  }

  @keyframes move {
    0% {
      transform: translateY(0rpx)
    }

    50% {
      transform: translateY(-30rpx)
    }

    100% {
      transform: translateY(30rpx)
    }
  }
</style>
